<template>
  <el-dialog
    :title="$t('set_permissions')"
    :visible.sync="authOpen"
    width="500px"
    append-to-body
  >
    <el-form ref="authForm" :model="authForm" label-width="100px">
      <el-form-item :label="$t('menu_permissions')">
        <el-checkbox
          v-model="menuExpand"
          @change="handleCheckedTreeExpand($event, 'menu')"
          >{{ $t("expand_collapse") }}</el-checkbox
        >
        <el-checkbox
          v-model="menuNodeAll"
          @change="handleCheckedTreeNodeAll($event, 'menu')"
          >{{ $t("elect_all_don_select_all") }}</el-checkbox
        >
        <el-tree
          class="tree-border"
          :data="menuOptions"
          show-checkbox
          ref="menu"
          node-key="id"
          empty-text="loading.."
          :props="defaultProps"
        ></el-tree>
      </el-form-item>
      <el-form-item :label="$t('remarks')">
        <el-input
          v-model="authForm.remark"
          type="textarea"
          :placeholder="$t('please_enter', { name: $t('remarks') })"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="authSubmitForm">{{
        $t("confirm")
      }}</el-button>
      <el-button @click="authCancel">{{ $t("cancel") }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  clientEmployerMenuTree,
  permissionSettings,
} from "@/api/custom/customerList";
export default {
  data() {
    return {
      authOpen: false,
      menuExpand: "",
      menuNodeAll: "",
      //权限表单
      authForm: {
        menuIdList: [],
      },
      // 菜单列表
      menuOptions: [],
      defaultProps: {
        children: "children",
        label: (data) => this.$t(data.label),
      },
    };
  },
  created() {},
  methods: {
    handleUrl(sign) {
      this.authOpen = true;
      this.authForm = sign;
      clientEmployerMenuTree(sign.id).then((response) => {
        this.menuOptions = response.menus;
        let checkedKeys = response.checkedKeys;
        checkedKeys.forEach((v) => {
          this.$nextTick(() => {
            this.$refs.menu.setChecked(v, true, false);
          });
        });
      });
    },
    reset() {
      this.authForm = {
        menuIdList: [],
      };
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand(value, type) {
      if (type == "menu") {
        let treeList = this.menuOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
        }
      } else if (type == "dept") {
        let treeList = this.deptOptions;
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
        }
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll(value, type) {
      if (type == "menu") {
        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
      } else if (type == "dept") {
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
      }
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();

      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    /** 设置权限提交 */
    authSubmitForm() {
      this.authForm.menuIdList = this.getMenuAllCheckedKeys();
      let data = {
        businessId: this.authForm.id,
        menuIds: this.authForm.menuIdList,
        remark: this.authForm.remark,
      };
      permissionSettings(data).then((response) => {
        this.$modal.msgSuccess(this.$t("operation_successful"));
        this.authOpen = false;
        this.$emit("handleSuccess");
      });
    },
    // 取消按钮
    authCancel() {
      this.authOpen = false;
      this.reset();
    },
  },
};
</script>

<style lang="scss" scoped></style>
